<template>
    <div>
        <div class='bg flex'>
            <div class='windows column'>
                <div class='title flex'>请填写您的手机号码确认身份</div>
                <div class='input flex'>
                    <input v-model="phone" type='number' maxlength="11"></input>
                </div>
                <div class='flex submit-btn' @click='ensureTap'>确认</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from "mint-ui";
    import { validateRecipe } from "./../api/index";
    export default{
        data(){
            return{
                phone: '',//电话号码
                flag: true,
                recipeid: '',//处方id
                outTime: 1000,//延时时间
            }
        },
        mounted(){
            if(this.$route.params.recipeid){
                this.recipeid = this.$route.params.recipeid
            }else{
                Toast({
                    message:'暂无信息',
                    position:'center',
                    duration:2000
                })
                return false;
            }
        },
        methods:{
            //验证手机号码
            ensureTap(){
                let mstr = sessionStorage.getItem('mstr')
                if (!this.isTel(this.data.phone)) {
                    Toast({
                        message: '请输入有效号码',
                        position:'center',
                        duration:2000
                    })
                    return false;
                }
                validateRecipe(mstr,this.recipeid,this.phone).then((res)=>{
                    if(res.data.status === 1){
                        this.$router.push({
                            name:'recipe',
                            params:{
                                recipeid:this.recipeid,
                                status:'scane'
                            }
                        })
                    }else{
                        Toast({
                            message: res.data.info,
                            position:'center',
                            duration:2000
                        })
                    }
                })

            },
            //验证手机号码
            isTel(mobile) {
                return /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(mobile);
            },
        }
    }
</script>

<style lang="scss" scoped>
@import "../base/css/_base.scss";
.bg{
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: url('../assets/bg2.png') no-repeat 0 0 ;
}
.bg>image{
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}
.bg .windows{
    width: torem(560px);
	height: torem(420px);
	background-color: #ffffff;
	border-radius: torem(10px);
    padding-top: torem(50px);
    justify-content: center;
    z-index: 10;
    align-items: center;
}
.bg .windows .title{
    color: #333333;
    font-size: torem(30px);
    margin-bottom: torem(40px);
}
.bg .windows .input{
    width: torem(331px);
	height: torem(72px);
	border-radius: torem(6px);
	border: solid 1px #db5034;
    margin-bottom: torem(50px);
}
.bg .windows .input input{
    width: 100%;
    height: 100%;
    padding-left: torem(20px);
    font-size: torem(28px);
}
.submit-btn{
    width: torem(220px);
	height: torem(80px);
	background-color: #db5034;
	border-radius: torem(6px);
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: torem(30px);
}

</style>